﻿<!doctype HTML>
<html>
    <head>
        <title>Help settings flyout</title>
    </head>
    <body>
        <!-- BEGINSETTINGFLYOUT -->
        <div data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help settings flyout" data-win-options="{settingsCommandId:'help',width:'wide'}">
            <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
            <div class="win-ui-dark win-header" style="background-color:#00b2f0"> <!-- Background color reflects app's personality -->
               <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
               <div class="win-label">Help</div>
            </div>
            <div class="win-content ">
                <div class="win-settings-section">
                    <h3>How to use the D20 Dice Roller</h3>

                    <p>Select either the graphic version or the text-based one.</p>
                </div>
            </div>
        </div>
        <!-- ENDSETTINGSFLYOUT -->
    </body>
</html>
